<template>
	<view >
		<view class="notes">
			<p><span>*</span>设备上报信息</p>
		</view>
		<!-- <button @click="show = true">点击选择</button> -->
		<!-- 用户选择设备 下拉框  -->
		<qianziyu-select 
			:show="show" 
			type="checkbox"
			name="dropDownInfor" 
			:popupTitle="popupTitle" 
			:dataLists="deviceInforList"
			placeholder="输入名称搜索"
			@cancel="show = false"
			@search="selectSearch" 
			@submit="SerialNumberValue">
			</qianziyu-select>
		<uni-forms :rules="rules"  :modelValue="formData" ref="form" validate-trigger="bind" err-show-type="undertext" >
			<uni-forms-item name="serialnumber"  label="序列号(SerialNumber):" label-width="120px" >
				
				<u-row customStyle="margin-bottom: 10px">
					<u-col span="8">
						<!-- <view v-if="list.length == 0 " @click="show = true" style="font-weight: 600; color: cornflowerblue;">请选择需要绑定的设备</view> -->
						<view v-if="list.length == 0" @click="show = true" style="display: flex; align-items: center; justify-content: space-between;">  
						    <text style="font-weight: 600; color: cornflowerblue;">请选择需要绑定的设备</text>  
						    <u-icon name="arrow-down"></u-icon>
						  </view>
						<view style=" height: 30px; padding-top: 8px; text-align: center; font-weight: bold; font-size: 16px;" 
							@click="show = true" v-else>
							已选择{{list.length}}台设备
						</view> 
					</u-col>
					<u-col span="4">
						<u-icon @click="showPop = true " v-if="list.length != 0" label="查看详情" label-size="10" space="5" labelPos="bottom" size="20" name="https://cdn.uviewui.com/uview/example/button.png"></u-icon>	
					</u-col>
				</u-row>
			</uni-forms-item>	
			
			<!--required  -->
			<uni-forms-item name="binder"  label="绑定人(binder):" label-width="80px">
				<input type="text" v-model="formData.binder" class="uni-input-border"  placeholder="请输入绑定人" />
			</uni-forms-item>	
			<uni-forms-item name="customername"  label="客户名称(CustomerName):" label-width="120px">
				<input type="text" v-model="formData.customername" class="uni-input-border" placeholder="请输入名字" disabled/>
			</uni-forms-item>
			<uni-forms-item name="customerphone"  label="联系方式(Tel):" label-width="80px" >
				<input type="text" v-model="formData.customerphone" class="uni-input-border" maxlength="11" placeholder="请输入联系方式" />
			</uni-forms-item>
			<uni-forms-item name="position"  label="职位(Position):" label-width="80px">
				<input type="text" v-model="formData.position" class="uni-input-border" placeholder="请输入您的职位"/>
			</uni-forms-item>
			<uni-forms-item name="affiliatedCompany"  label="所属公司(company)" label-width="80px" >
				<input type="text" v-model="formData.affiliatedCompany" class="uni-input-border" placeholder="请您的所属公司" />
			</uni-forms-item>
			<uni-forms-item name="affiliatedDept"  label="所属部门(section)" label-width="80px">
				<input type="text" v-model="formData.affiliatedDept" class="uni-input-border" placeholder="请输入您所属的部门"/>
			</uni-forms-item>
			
			<button class="submit-bt" @click="bindDeviceSubmit">绑定设备(Bind Device)</button>
			
		</uni-forms>
		<u-gap height="40px" bgColor="#ffffff"></u-gap>
		

	<!-- 选中 信息列表popup  -->
	<u-popup :show="showPop" mode="right"  @close="close" @open="open" safeAreaInsetTop = true >
		<vie class="popupTOPTitle">选中的未绑定设备信息</vie>
		 <u-row customStyle="margin-bottom: 10px">
			<u-col span="4">
				<view class="popupTitle">序列号</view>
			</u-col>
			<u-col span="8">
				<view class="popupTitle">设备信息</view>
			</u-col>
		</u-row>
		<view  v-for="(item,index) in list" :key="index">
			<u-row customStyle="margin-bottom: 10px">
				<u-col span="6">
					<view style="text-align: center;">{{item.serialnumber}}</view>
				</u-col>
				<u-col span="6">
					<view style="text-align: center;">{{item.dropDownInfor}}</view>
				</u-col>
			</u-row>
			<u-divider ></u-divider>
		</view>
	</u-popup>
	
	</view>
</template>
 
<script>
import list from '../../uni_modules/uview-ui/libs/config/props/list';
import { data } from '../../uni_modules/uview-ui/libs/mixin/mixin';
	
	let scanResult;
	export default {

		data() {
			return {
				show: false, // 弹窗展示
				dataLists: [],  // 弹窗 信息 
				list:[],
				 
				popupTitle:'选择绑定设备',
				deviceInforList:[],
				
				showPop:false,  // 详情 弹窗
				
				formData: {
					serialnumber: undefined,    //序列号
					devicetype:'',     		//设备类型
					customername: '',  			//客户名称
					customerphone:'',  		//客户联系电话
					position:'',  				//职位
					binder:'',					// 绑定人 
					openid:''  ,// 微信登录 code 
					affiliatedCompany:'',   //所属公司
					affiliatedDept:'',      //所属部门
				},
				rules: {
					customername:{
						rules:[{
							required: true,
							errorMessage: '请输入客户名称',
							}]
					},
					binder:{
						rules:[{
							required: true,
							errorMessage: '请输入绑定人',
							}]
					},
					
					customerphone:{
						rules:[{
							required: true,
							errorMessage: '请输入客户电话',
							}]
					},
					position:{
						rules:[{
							required: true,
							errorMessage: '请输入职位',
							}]
					},
					affiliatedCompany:{
						rules:[{
							required: true,
							errorMessage: '请输入您所属公司',
							}]
					},
					affiliatedDept:{
						rules:[{
							required: true,
							errorMessage: '请输入您所属部门',
							}]
					}
				}
			}
		},
		onLoad(option) {
			scanResult = JSON.parse(decodeURIComponent(option.data));
			this.formData.serialnumber = scanResult.title	/// 序列号 
			this.openid = uni.getStorageSync('clientOpenid')  // openid 
			//   根据  序列号 + openid  找到未绑定设备 
			 uni.request({
			 	url:'https://www.smacaftersales.com:443/information/information/selectUnboundDevice',
				method:'POST',
				data:{
					serialnumber: this.formData.serialnumber,    
					openid: this.openid
				},
			
				success: (res) => {
					
					switch (res.data.msg){
						case '没有设备':
							console.log("----设备库中没有该序列号设备-----")
							uni.showModal({
								title:'数据异常提示',
								content:'设备库中没有该序列号设备,请联系管理员确认数据',
								confirmText: '关闭',
								showCancel: false,
								success: function (msg) {
									console.log("---- 关闭---")
									setTimeout(() => {
										uni.switchTab({
											url: '/pages/clientVue/bindDevice'
										})	
									}, 500)
								}
							})
							break;
						case '没有信息':
							console.log("---该序列号没有录入设备信息！！！---")
							uni.showModal({
								title:'数据异常提示',
								content:'该序列号没有录入设备信息！！！',
								confirmText: '关闭',
								showCancel: false,
								success: function (msg) {
									console.log("---- 关闭---")
									setTimeout(() => {
										uni.switchTab({
											url: '/pages/clientVue/bindDeviceSubmit'
										})	
									}, 500)
								}
							})
							break;
						case "操作成功":
							if(res.data.data.length == 0){
								uni.showToast({
									title:"您已绑定所有设备",
									icon:"none"
								})
							}else{
								this.formData.customername = res.data.data[0].companyName;
								console.log("---未绑定设备  信息---",res.data.data);
								for (var i = 0; i< res.data.data.length; i++){
									this.deviceInforList.push(res.data.data[i]);
								}
							}
							break;
						
					}
				}
				
				
			 })
		},
		onReady() {
			this.$refs.form.setRules(this.rules)
		},
		methods: {
			SerialNumberValue(e){
				this.show = false;
				this.list = [];
				for (var i = 0; i< e.length; i++){
					this.list.push(e[i]);
				}
				console.log("---选中的序列号列表---",this.list);
				
			},
			selectSearch(e){
				console.log("---搜索.....----",e)
				
			},
			open() {  // 弹窗开启  
				
			},
			close() {
				this.showPop = false;
			},
			
			bindDeviceSubmit(){
			    console.log(uni.getStorageSync('clientOpenid'),'--------   缓存 openID --------')
				this.$refs.form.validate().then( res=>{ 
					console.log('表单数据信息：success', res);
					if(this.list.length == 0){
						uni.showToast({
							title:"请选择绑定的设备",
							icon:'none'
						})
					}else{
						for (var i =0;i< this.list.length;i++){
						console.log("--serialnumber00000--",this.list[i].serialnumber)
							uni.request({
								url: 'https://www.smacaftersales.com:443/bindRequest/bindRequest/addBindRequest', 
								method: 'POST',
								data: {
									serialnumber: this.list[i].serialnumber,    	
									customername: this.formData.customername,  			
									customerphone: this.formData.customerphone,  		
									position: this.formData.position,  				
									binder: this.formData.binder,
									openid: this.openid	,
									affiliatedCompany: this.formData.affiliatedCompany,
									affiliatedDept:this.formData.affiliatedDept
								},
								header: {
									"Content-Type": "application/json" ,
								},
								success: (res) => {
									console.log(res,"----- 绑定 设备 -----")
									uni.showToast({
										title: res.data.msg,
										duration: 1500,
										icon: 'none'
									})
									if(res.data.msg == '操作成功'){
										this.timerIntv = setTimeout( () => {
											uni.switchTab({
											url: '/pages/clientVue/bindDevice'
										})
									}, 1500)
									}	
								},
							})
						}
					}
				}).catch(err =>{
					console.log('表单错误信息：', err);
				})
				
			}
		}
	}
</script>

<style>
	/* 页面背景 */
	page {
		background-color: #ffffff;
	}
</style>

<style lang="scss">
	.popupTOPTitle{
		text-align: center;
		font-weight: bold;
		font-size: 15px;
		margin-top: 0px;
		margin-bottom: 8px;
		color: #6699FF;
	}
	.popupTitle{
		text-align: center; 
		font-weight: bold;
		font-size: 15px;
	}
	.uni-input-border {
		padding: 0 0px;
		text-align:center;
		height: 35px;
		width: 80%;
		font-size: 16px;
		color: #666;
		border: 1px #e5e5e5 solid;
		border-radius: 5px;
		box-sizing: border-box;
		font-weight: bold;
	}
	.notes{
		width: 335px;
		margin: 20px auto 10px;
		font-size: 14px;
		
		span{
			color: red;
			margin-right: 4px;
		}
		p{
			color: #999;
		}
	}
	.submit-bt{
		font-size: 15px;
		width: 200px;
		height: 50px;
		display: flex;
		margin-top: 150px ;
		align-items: center;
		justify-content: center;
		border-radius: 25px;	
		border: 3rpx solid #6699FF;
	}
	
</style>